<template>
  <view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
    <!-- <view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
      <view class="line"></view>
      <view class="title ss-m-l-20 ss-m-r-20">详情</view>
    </view> -->
    <view class="newxianghead">
      <su-tabs
        :list="state.tabMaps"
        :scrollable="false"
        :current="state.currentTab"
        @change="onTabsChange"
      >
      </su-tabs>
    </view>
    
    <view class="card-content" v-if="state.currentTab == 0">
      <mp-html :content="content"></mp-html>
    </view>
    <view class="newlist" v-else>
      <view v-if="state.iconStatus && state.pagination.data" class="goods-list ss-m-t-20">
        <view
          class="ss-p-l-20 ss-p-r-20 ss-m-b-20"
          v-for="item in state.pagination.data"
          :key="item.id"
        >
          <s-goods-column
            class=""
            size="lg"
            :data="item"
            :topRadius="10"
            :bottomRadius="10"
            :goubtnShow="true"
            :buttonShow="false"
            @click.stop="sheep.$router.go('/pages/goods/index', { id: item.id })"
          ></s-goods-column>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed, reactive } from 'vue';
  const { safeAreaInsets } = sheep.$platform.device;
  

  const state = reactive({
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    iconStatus: true,
    loadStatus: '',
    currentTab: 0,
    tabMaps: [
      {
        name: '详情',
        value: 'all',
      },
      {
        name: '相似推荐',
        value: 'yes',
      },
      {
        name: '常购清单',
        value: 'back',
      }
    ]
  });
  async function getList(type) {
    if(type == 1){
      const res = await sheep.$api.goods.getGoodsByLike({
        goods_id:props.goodsId
      });
      if (res.code === 1) {
        let parms =res.data
        for(let i in parms){
          parms[i].newtitle = parms[i].title
        }
        state.pagination.data = parms
      }
    }else if(type == 2){
      const res = await sheep.$api.goods.getGoodsByBuy({
        goods_id:props.goodsId
      });
      if (res.code === 1) {
        let parms = res.data
        for(let i in parms){
          parms[i].newtitle = parms[i].title
        }
        state.pagination.data = parms
      }
    }
    
  }
  const props = defineProps({
    content: {
      type: String,
      default: '',
    },
    goodsId: {
      type: [Number, String],
      default: 0,
    },
  });
  // 切换选项卡
  function onTabsChange(e) {
    state.pagination = {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    };
    state.currentTab = e.index;
    if(state.currentTab == 1){
      getList(1)
    }else if(state.currentTab == 2){
      getList(2)
    }
    // getOrderList();
  }
</script>

<style lang="scss" scoped>
  .detail-content-card {
    .card-header {
      .line {
        width: 6rpx;
        height: 30rpx;
        background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
        border-radius: 3rpx;
      }

      .title {
        font-size: 30rpx;
        font-weight: bold;
      }

      .des {
        font-size: 24rpx;
        color: $dark-9;
      }

      .more-btn {
        font-size: 24rpx;
        color: var(--ui-BG-Main);
      }
    }
  }
  .newxianghead{
    margin-bottom: 30rpx;
  }
  .newlist{
    padding-bottom: 30rpx;
    min-height: 50vh;
  }
</style>
